<template>
	<view>
		<view v-if="info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view  v-if="info!=null">
		<view  style="height: 24rpx;"></view>
		<view class="id_card_content_box">
			<view class="item">
				<text class="left">姓名</text>
				<view class="right">
					<text class="title">{{info.info.name}}</text>
				</view>
			</view>
			<view class="item">
				<text class="left">状态</text>
				<view class="right">
					<text class="title" v-if="info.info.certification==0">待审核</text>
					<text class="title" v-if="info.info.certification==1">已认证</text>
					<text class="title" v-if="info.info.certification==2">已驳回</text>
				</view>
			</view>
			<view class="item">
				<text class="left">身份证号</text>
				<view class="right">
					<text class="title">{{info.info.id_card_number}}</text>
				</view>
			</view>
			<view class="item">
				<text class="left">有效期至</text>
				<view class="right">
					<text class="title">{{info.info.period}}</text>
				</view>
			</view>
		</view>
		<view class="id_card_content_box">
			<view class="item">
				<text class="left">身份证照片</text>
			</view>
			<view class="id_card_img_box">
				<view class="id_card_img_item_box" style="margin-right: 18rpx;">
					<image :src="info.info.id_card" mode="aspectFill"></image>
					<view class="id_card_img_item_mask">人像面</view>
				</view>
				<view class="id_card_img_item_box">
					<image :src="info.info.idcard_reverse" mode="aspectFill"></image>
					<view class="id_card_img_item_mask">国徽面</view>
				</view>
			</view>
		</view>
		<view class="id_card_content_box" v-if="info.info.health!=''">
			<view class="item">
				<text class="left">健康证</text>
			</view>
			<view class="id_card_img_box" style="justify-content: flex-start;margin-left: 20rpx;">
				<view class="id_card_img_item_box" style="margin-right: 18rpx;">
					<image :src="info.info.health" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="id_card_content_box" v-if="info.info.certification==2">
			<view class="item">
				<text class="left">驳回原因</text>
			</view>
			<view class="id_card_reason">
				{{info.info.reason==null?'--':info.info.reason}}
			</view>
		</view>
		<view  style="height: 160rpx;"></view>
		<view class="footer" v-if="info.info.certification==2">
			<view hover-class="hover_class" class="creatbutton" @click="goAuth()">
				重新认证
			</view>
		</view>
		<view class="footer" v-if="info.info.certification==1">
			<view hover-class="hover_class" class="creatbutton" @click="goAuth1()">
				更新认证信息
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
		},
		data() {
			return {
				info:null,
			};
		},
		onLoad() {
			var a = this
			a.getUserInfo()
		},
		methods:{
			goAuth(){
				uni.navigateTo({
					url:'/pages/user/auth1?type=1'
				})
			},
			goAuth1(){
				uni.navigateTo({
					url:'/pages/user/auth1?type=1'
				})
			},
			getUserInfo(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('user/info',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.info = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			}, 
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.id_card_content_box{
	width: 684rpx;
	background-color: #fff;
	margin: 0 auto;
	border-radius: 16rpx;
	margin-bottom: 18rpx;
	.id_card_reason{
		padding: 26rpx 16rpx 26rpx 24rpx;
		font-size: 30rpx;
	}
	.id_card_img_box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 30rpx;
		margin-top: 30rpx;
		.id_card_img_item_box{
			width: 310rpx;
			height: 232rpx;
			background-color: #F5F6F8;
			border-radius: 16rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			.id_card_img_item_mask{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 310rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx; 
				border-radius:0 0 16rpx 16rpx;
				background-color: rgba(65, 138, 255, 0.4);
				color: #fff;
			}
		}
	}
	.item {
		display: flex;
		padding: 26rpx 16rpx 26rpx 24rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid rgba(48, 49, 51, 0.05);
	
		.left {
			color: rgba(48, 49, 51, 1);
			padding-left: 20rpx;
			font-size: 30rpx;
		}
	
		.right {
			display: flex;
			align-items: center;
			padding-right: 10rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
			.icon {
				width: 88rpx;
				height: 88rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
	
				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}
			}
	
			.title {
				margin-right: 20rpx;
				font-size: 30rpx;
				color: rgba(48, 49, 51, 1);
			}
	
			.max_right {
				max-width: 500rpx;
				text-align: end;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
	
			.address {
				text-align: end;
				margin-right: 20rpx;
				width: 486rpx;
				/* //溢出隐藏省略号 */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* //-webkit-line-clamp:1; 超出几行 */
			}
	
			.button {
				width: 32rpx;
				height: 32rpx;
			}
		}
	
	}
}
.footer {
		width: 100%;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #EBEEF5;

		.creatbutton {
			// background-color: rgba(255, 107, 0, 1);
			border: 2rpx solid #418AFF;
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
			width:688rpx;
			height: 80rpx;
			border-radius: 16rpx;
			color:#418AFF;
			font-size: 30rpx;
			border-radius: 12rpx;
			position: relative;
			.shareBtn{
				position: absolute;
				top: 0;
				left: 0;
				width:688rpx;
				height: 80rpx;
				opacity: 0;
			}
		}
	}
</style>
